import React, { FC } from 'react'
import styled, { StyledComponent } from "styled-components"
import Ellipse from '@/assert/images/salesAnalysis/ellipse_dark.png'
import { IFinance } from '@/types/pages/finance/interface'
import EllPlane from '@/assert/images/salesAnalysis/ellipse_plane.png'
import EllCover from '@/assert/images/salesAnalysis/ellipse.png'
import EllCoverLine from '@/assert/images/salesAnalysis/ellipse_line.png'
import Up from '@/assert/images/button/up-g.png'
import Down from '@/assert/images/button/down-b.png'
import { toThousands } from '@/utlis/utlis'
import { Line, Circle } from 'rc-progress'
import Title from '@/components/pages/title'
import Count from '@/components/pages/count'
import Rate from '@/components/pages/rate'
import frame_url from '@/assert/images/bg_big.png'
import bg_verticle_url from '@/assert/images/bg_verticle.png'
const SaleCount = styled.div<{image?:string}>`
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    /* background-image: url(${bg_verticle_url});
    background-size: 100% 100%; */
    color:#fff;
    background-repeat: no-repeat;
    .content{
      flex:1 1 35%;
      display: flex;
      flex-direction: row;
      padding-top:2rem;
      padding-right: 3rem;
      padding-left: 3rem;


      .cylinder{
        flex: 1 1 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        .back{
          position: relative;
          width: 9.3rem;
          height: 8.2rem;
          flex-direction: column;
          background-image: url(${(props)=>props.image});
          background-size: 100% 100%;
          background-repeat: no-repeat;


          .height{
            position: absolute;
            bottom:1rem;
            width: 6.3rem;
            height: 4.2rem;
          }
        }

      }
      .count{
        flex: 1 1 50%;
        display: flex;
      }
      .rate{
        flex: 1 1 25%;
        display: flex;
      }
    }
    .bar{
      flex:1 1 30%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      position: relative;
      padding:2rem;
      margin-bottom:2rem;
      .progress-bar{
        padding-left:2rem;
        width: 24.4rem;
        height: 3rem;
        flex: 1 1 60%;
        text-align: center;
      }
      .bar-num{
        position: absolute;
        color: #fff;
        left: 35%;
        top:49%;
        transform: translate(-50%,-50%);
        font-size: 2rem;
        font-weight: bold;
      }
      span{
        flex: 1 1 40%;
        text-align: center;
        color:#00C6FF;
        font-size: 1.8rem;
        font-weight: bold;
      }
    }
`

const Content: FC<Partial<IFinance>&{image?:string}> = function (props) {
  return (
    <SaleCount image={props.image}>
      <Title name={props.name!} />
      <div className='content'>
        <div className='cylinder' >
          <div className='back' />
        </div>
        <div className='count'><Count num={props.num!} unit={props.unit!} /></div>
        <div className='rate'><Rate comparisonText={props.comparisonText} upDownStatus={props.upDownStatus!} saleRate={props.saleRate!}/></div>
      </div>
      <div className='bar'>
        <div className='progress-bar'>
          <Line percent={(parseFloat(props.num!)/parseFloat(props.totalNum!))*100} strokeWidth={10} trailWidth={10} strokeColor="#19D9FE" trailColor="#045585"  />
       </div>
       <div className='bar-num'>{((parseFloat(props.num!)/parseFloat(props.totalNum!))*100).toFixed(4)+'%'}</div>
      <span>{props.num}/{props.totalNum}</span>
      </div>
    </SaleCount>
  )
}

export default Content
